@mixin scrollBar() {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
    border-radius: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(177, 177, 177, 0.5);
    border-radius: 8px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(162, 161, 161, 0.5);
    border-radius: 8px;
  }

  &::-webkit-scrollbar-thumb:active {
    background: rgba(184, 182, 182, 0.5);
    border-radius: 8px;
  }
}

@mixin scrollBarNone() {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.ssml-editor-root {
  .scrollbar {
    @include scrollBar();
  }

  &.scrollbar {
    @include scrollBar();
  }

  .scrollbar-none {
    @include scrollBarNone();
  }

  &.scrollbar-none {
    @include scrollBarNone();
  }
}
